<!--
<template>
  <div style="border: 1px solid #ccc; ">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" mode="default" />
    <Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" mode="default" @onCreated="handleCreated" @customPaste="customPaste" />
  </div>
  <el-button style="margin: 10px auto" @click="getEditorHTML">获取富文本HTML内容</el-button>
</template>
<script setup>
// 引入富文本编辑器CSS
import '@wangeditor/editor/dist/css/style.css';
import { onBeforeUnmount, ref, shallowRef } from 'vue';
// 导入富文本编辑器的组件
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref('<p>hello <strong>hello world</strong></p>');
const toolbarConfig = {};
const editorConfig = ref({ placeholder: '请输入内容...', MENU_CONF: {} });

// 自定义图片上传
editorConfig.value.MENU_CONF['uploadImage'] = {
  async customUpload(file, insertFn) {
    console.log('上传图片', file);
    // 将上传的file图片转换为base64
    const base64 = URL.createObjectURL(file);

    // 这里的file为上传的图片对象,insertFn传入
    insertFn(base64, 'img');
  },
};

// 自定义视频上传
editorConfig.value.MENU_CONF['uploadVideo'] = {
  async customUpload(file, insertFn) {
    console.log('上传视频', file);
  },
};

// 富文本编辑器生成后触发
const handleCreated = editor => {
  editorRef.value = editor; // 记录 editor 实例，重要！
  console.log(editorConfig.value.MENU_CONF, 'editorConfig.value');
};

// 监听富文本编辑器粘贴行为
const customPaste = (editor, event, callback) => {
  // 获取粘贴的纯文本
  const text = event.clipboardData.getData('text/plain');
  if (text) {
    editor.insertText(text);
    event.preventDefault();
    callback(false);
  }
};

// 获取富文本html内容
const getEditorHTML = () => {
  console.log(editorRef.value.getHtml());
};

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
</script> -->

<template>
  <div class="Practical-Training">
    <!-- 实训活动操作按钮 -->
    <div class="Practical-Training-active display-common-horizontal-between">
      <div class="button-common-round" @click="addTraining">发起实训</div>
      <CommonSearch :isShowKey="isShowKey"></CommonSearch>
    </div>
    <!-- 实训活动列表 -->
    <CommonList :list="list"></CommonList>
    <!-- 实训活动分页 -->
    <CommonPagination
      :currentPage="currentPage"
      :pageSize="pageSize"
      :total="total"
      :size="size"
      :background="background"
      :disabled="disabled"
    ></CommonPagination>
    <!-- 返回顶部 -->
    <BackToTop />
  </div>
</template>

<script setup>
import { ref } from "vue";

import CommonList from "@/components/common/commonList.vue";
import CommonPagination from "@/components/common/commonPagination.vue";
import CommonSearch from "@/components/common/commonSearch.vue";

import { useRouter } from "vue-router";
const router = useRouter();

// 搜索框是否显示
const isShowKey = ref("practicalTraining-default");

//分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(120);
const size = ref("default"); //分页大小
const background = ref(true); //分页背景色
const disabled = ref(false); //分页禁用

// 将list传给子组件 子组件接受
const list = ref([
  {
    activeImg: "../../assets/images/activeImg.png", //活动图片
    title: "2024年第二届实训活动2024年第二届实训活动2024年第二届实训活动", //活动标题
    time: "2024-10-22 ~ 2024-12-22", //活动时间
    status: "实训报名", //活动状态
    people: "100", //活动人数
    synopsis:
      "这是XX的实习实训活动，旨在让学生培这是XX的实习实训活动，旨在让学生培养实操生培养实操生培养实操动手能力，提前适应工作实际环境，这是XX的实习实训养实操生培养实操生培养实操动手能力，提前适应工作实际环境，这是XX的实习实训...", //活动简介
    comment: "20", // 活动评论
    id: "1", // 活动id
  },
  {
    activeImg: "../../assets/images/activeImg2.png", //活动图片
    title: "2024年第二届实训活动", //活动标题
    time: "2024-10-22 ~ 2024-12-22", //活动时间
    status: "实训报名", //活动状态
    people: "100", //活动人数
    synopsis:
      "这是XX的实习实训活动，旨在让学生培养实操生培养实操生培养实操动手能力，提前适应工作实际环境，这是XX的实习实训...", //活动简介
    comment: "20", // 活动评论
    id: "2", // 活动id
  },
  {
    activeImg: "../../assets/images/activeImg2.png", //活动图片
    title: "2024年第二届实训活动", //活动标题
    time: "2024-10-22 ~ 2024-12-22", //活动时间
    status: "实训报名", //活动状态
    people: "100", //活动人数
    synopsis:
      "这是XX的实习实训活动，旨在让学生培养实操生培养实操生培养实操动手能力，提前适应工作实际环境，这是XX的实习实训...", //活动简介
    comment: "20", // 活动评论
    id: "3", // 活动id
  },
  {
    activeImg: "../../assets/images/activeImg2.png", //活动图片
    title: "2024年第二届实训活动", //活动标题
    time: "2024-10-22 ~ 2024-12-22", //活动时间
    status: "实训报名", //活动状态
    people: "100", //活动人数
    synopsis:
      "这是XX的实习实训活动，旨在让学生培养实操生培养实操生培养实操动手能力，提前适应工作实际环境，这是XX的实习实训...", //活动简介
    comment: "20", // 活动评论
    id: "4", // 活动id
  },
  {
    activeImg: "../../assets/images/activeImg2.png", //活动图片
    title: "2024年第二届实训活动", //活动标题
    time: "2024-10-22 ~ 2024-12-22", //活动时间
    status: "实训报名", //活动状态
    people: "100", //活动人数
    synopsis:
      "这是XX的实习实训活动，旨在让学生培养实操生培养实操生培养实操动手能力，提前适应工作实际环境，这是XX的实习实训...", //活动简介
    comment: "20", // 活动评论
    id: "5", // 活动id
  },
  {
    activeImg: "../../assets/images/activeImg2.png", //活动图片
    title: "2024年第二届实训活动", //活动标题
    time: "2024-10-22 ~ 2024-12-22", //活动时间
    status: "实训报名", //活动状态
    people: "100", //活动人数
    synopsis:
      "这是XX的实习实训活动，旨在让学生培养实操生培养实操生培养实操动手能力，提前适应工作实际环境，这是XX的实习实训...", //活动简介
    comment: "20", // 活动评论
  },
  {
    activeImg: "../../assets/images/activeImg2.png", //活动图片
    title: "2024年第二届实训活动", //活动标题
    time: "2024-10-22 ~ 2024-12-22", //活动时间
    status: "实训报名", //活动状态
    people: "100", //活动人数
    synopsis:
      "这是XX的实习实训活动，旨在让学生培养实操生培养实操生培养实操动手能力，提前适应工作实际环境，这是XX的实习实训...", //活动简介
    comment: "20", // 活动评论
  },
]);

// 创建实训
const addTraining = () => {
  router.push({
    path: "/addtraining",
  });
};
</script>

<style lang="scss" scoped>
.Practical-Training {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  .Practical-Training-active {
    // margin-bottom: 34px;
    box-sizing: border-box;
  }
}
</style>
